<template>
  <div class="personContainer">
      <div class='index-wrap'>
        <i-index height="100%" :scrollTop="scrollTop">
            <i-index-item v-for="(item,index) in list" :key="index" :name="item.key">
                <div class="i-index-demo-item"  v-for="(item1,inx) in item.list" :key="inx" @click='selectPerson(item1,index,inx)'>
                    <div class='name'>{{item1.name}}</div>
                    <div class='status-wrap'>
                      <div class='circle' :class='{gray:item1.attendanceStatus==1,green:item1.acceptedCount==0,orange:item1.acceptedCount>0 && item1.acceptedCount<4,red:item1.acceptedCount>3}'></div>
                      <div v-if='item1.attendanceStatus==1'>未签到</div>
                      <div v-else class='status'>
                        <div v-if='item1.acceptedCount==0'>空闲</div>
                        <div v-else-if='item1.acceptedCount>0 && item1.acceptedCount<4'>较忙</div>
                        <div v-else-if='item1.acceptedCount>3'>繁忙</div>
                        <div class='num'>{{item1.acceptedCount}}</div>
                      </div>
                    </div>
                    <div class='phone' @click='phone(item1.phoneNum)'><img src='/static/images/btn_phone@3x.png'/></div>
                    <div class='radio-wrap'>
                      <image src='/static/images/icon_confirm@3x.png' v-if='item1.selected'/>
                      <input type="checkbox" name="list" :value="item1.id" :checked="item1.selected" class='radio'>
                    </div>
                </div>
            </i-index-item>
        </i-index>
      </div>
      <div class='btn-line'>
        <button class='btn-default red' @click='reset'>重置</button>
        <button class='btn-default' @click='sure'>确定</button>
      </div> 
  </div>
</template>

<script type="text/javascript">
import { mapState } from 'vuex';
export default {
  data() {
    return {
      personList:[],
      scrollTop:0,
      list: [],
      projectId:null,
      personId:null,
      personName:'',
      selectedPersons:[]
    }
  },
  computed:{
    ...mapState(['userInfo'])
  },
  beforeMount() {
      var params = this.$root.$mp.query;
      if(params.projectId) this.projectId = params.projectId; 
      this.findPerson();
  },
  onLoad(){
    Object.assign(this.$data, this.$options.data())
  },
  methods:{
    findPerson(){
      this.$http.post({
        url:'/user/getHelpUser',
        data:{
          projectId:this.projectId,
          ukey:this.userInfo.ukey
        }
      }).then(res=>{
        if(res.s==0){
          res.i.Data.map(item=>{
            item.list.map(item1=>{
              item1.userId = item1.id;
              item1.type = 1;
              item1.selected = this.personList.indexOf(item1.id)>-1 ? true :false;
            })
            this.list.push(item)
          })
        }
      }).catch(e=>{
        console.log('获取失败',e)
      }) 
    },
    sure(item){
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2]; 
      if(this.personList.length>0){
        prevPage.setData({  
          userList:this.selectedPersons
        }) 
      }else{
        prevPage.setData({  
          userList:[]
        }) 
      }
      wx.navigateBack({delta:1}) 
    },
    reset(){
      this.personList = [];
      this.selectedPersons = [];
      this.list.map(item=>{
        item.list.map(item1=>{
          item1.selected = false;
        })
      })
    },
    selectPerson(item,index,inx){
      var has = this.personList.indexOf(item.id);
      if(has<0){
          this.personList.push(item.id)
          this.selectedPersons.push(item)
          this.$set(this.list[index].list[inx],'selected' ,true)
      }else{
        this.personList.splice(index,1)
        this.selectedPersons.splice(index,1)
        this.$set(this.list[index].list[inx],'selected' ,false)
      }   
    },
    phone(phoneNumber){
      wx.makePhoneCall({
        phoneNumber
      })
    }
  }
}
</script>

<style lang='less'>
page{
  height:100%;
  background:#eef7fd;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
.personContainer{
  height: 100%;
  display: flex;
  flex-direction: column;
  .index-wrap{
    height: 50rpx;
    flex:1;
  }
  .btn-line{
      display: flex;
      justify-content: center;
      padding: 20rpx;
      .badge-img{
        width: 80rpx;
        height: 80rpx;
      }
  }
  .btn-default{
      flex:1;
      margin: 0 20rpx;
      background: #1380d3;
      color:#fff!important;
      font-size:36rpx;
      border-radius:40rpx; 
      height: 80rpx;
      line-height: 80rpx;
      max-width: 50%;
      padding: 0;
      &.sm{
        height: 40rpx;
        line-height: 40rpx;
        max-width: 100%;
        width: 100%;
        font-size: 28rpx;
      }
      &.red{
          background: #ff554d
      }
      &.green{
        background: #50ae18
      }
  }
  /*索引*/
    .view{
        width: 100%;
        position: absolute;
        top:680rpx;
        bottom: 0;
        z-index: 1000;
    }
    .i-index-demo-item{
        padding:10rpx 20rpx;
        color: #999999;
        border-bottom: 2rpx solid #e6e6e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name{
          width: 40%
        }
        .icon{
          width: 40rpx
        }
        .status-wrap{
          display: flex;
          align-items: center;
          width: 200rpx;
          .status{
            display: flex;
            .num{
              margin-left:10rpx; 
            }
          }
          .circle{
            width: 28rpx;
            height: 28rpx;
            border-radius:15rpx; 
            margin:0 10rpx; 
            &.orange{
              background: #ff9900
            }
            &.green{
              background: #33cc00
            }
            &.gray{
              background: #999999
            }
            &.red{
              background: #ff0000
            }
          }
        }
    }
    .phone{
        height:40rpx;
        justify-items:end ;
        img{
            width:40rpx;
            height:40rpx;
        }
    }
    .radio-wrap{
      width: 60rpx;
      height: 60rpx;
      position: relative;
      image{
        position: absolute;
        left: 12rpx;
        top: 16rpx;
        width: 36rpx;
        height: 36rpx;
        z-index: 1;
      }
      .radio{
        position:absolute;
        left: 0;
        top: 0;
        z-index: 2;
        opacity: 0;
      }
    }
}
</style>
